<template>
  <div id="myself_page">
    <div class="main_container">
      <aside :class="{'a':fixed}">
        <NavCard></NavCard>
        <!--<div class="show-info">
          &lt;!&ndash;v-if="card1.list_item.length!==0"&ndash;&gt;
          <TabCard :card="card1">
          </TabCard>
        </div>-->
      </aside>
      <article>
        <router-view></router-view>
      </article>
    </div>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment */

  import NavCard from '@/components/smallComponents/navcard'
  import TabCard from '@/components/smallComponents/tabcard'
  import { getNotice } from '../public/api'
  import Bus from '../bus/bus'

  export default {

    components: {NavCard, TabCard},
    data () {
      return {
        type: '',
        hello: '我',
        fixed: '',
        card1: {
          title: '通知消息',
          btn_name: '',
          list_item: []
        }
      }
    },
    methods: {
      Init () {
        getNotice({
          home: true
        }).then(
          data => {
            var _this = this;
            (data.list).forEach(item => {
              item.forEach(item => {
                _this.card1.list_item.push({
                  id: Number(item.id),
                  name: item.title,
                  link: 'http://www.baidu.com'
                })
              })
            })
            _this.card1.list_item = _this.card1.list_item.sort(function (a, b) {
              return b.id - a.id
            }).filter(function (value, index) {
              return index < 8
            })
          }
        ).catch(msg => {

        })
      }
    },
    mounted () {
      this.Init()
      Bus.$on('toFix2', (current) => {
        this.fixed = current
      })
    },
    beforeDestroy () {
      Bus.$off(' toFix2')
    }
  }
</script>
<style scoped>
  #myself_page {
    /*background: palegoldenrod;*/
  }

  .main_container aside {
    float: left;
    padding-top: 2em;
    padding-left: 2em;
    width: 230px;
    position: absolute;
    text-align: left;
    margin-top: 30px;
    /*background: palegreen;*/
  }

  .main_container aside.a {
    margin-top: -30px;
    position: fixed;
  }

  .main_container article {
    margin-left: 280px;
    margin-right: 20px;
    overflow: hidden;
  }

  .main_container aside .show-info {
    margin-top: 20px;
    width: 230px;
    background: #f5d0c0;
  }

  /*.card {*/
  /*margin-top: 20px;*/
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  /*width: 600px;*/
  /*background: #fff;*/
  /*text-align: left;*/
  /*}*/

  /*h4 {*/
  /*background: #fff;*/
  /*text-align: left;*/
  /*width: 600px;*/
  /*margin: 20px auto 20px auto;*/
  /*padding: 10px;*/
  /*box-sizing: border-box;*/
  /*}*/
</style>
